import React, { useState } from 'react'
import './Bji.css'
import { useNavigate } from 'react-router-dom'
import { LeftOutline, EditSOutline, MailOutline, CompassOutline, PhonebookOutline, GlobalOutline } from 'antd-mobile-icons'


export default function Bji() {
  let [use, setuse] = useState({
    name: 'Koto', zw: 'UX设计师',img:'/imgs/1.jpg',
    gyw: '我是一名热情的设计师，通过以人为本的设计将问题转化为设计方案，我在这个领域有1年以上的经验，热情的设计师通过人人为本的设计将问题转换为设计解决方案。',
    dh: '18002990339', yx: 'koto@gmail.com', wz: 'koto@gmail.com', dz: '北京市朝阳区东三环北路甲1号',
    gzjl: [
      { img: '/imgs/2.jpg', names: 'UX设计师', zzw: 'UED', kstime: '2020-11', endtime: '至今', ganj: '我是一名热情的设计师，通过以人为本的设计将问题转化为设计方案，我在这个领域有1年以上的经验，热情的设计师通过人人为本的设计将问题转换为设计解决方案。' },
      { img: '/imgs/3.jpg', names: 'UX设计师', zzw: '产品部', kstime: '2018-10', endtime: '2020-10', ganj: '我是一名热情的设计师，通过以人为本的设计将问题转化为设计方案，我在这个领域有1年以上的经验，热情的设计师通过人人为本的设计将问题转换为设计解决方案。' }
    ],
    jyjl: { img: '/imgs/4.jpg', schoolname: '河北师范大学', zymc: '软件工程', kstime: '2014-10', endtime: '2018-10', jyxy: '我是一名热情的设计师，通过以人为本的设计将问题转化为设计方案，我在这个领域有1年以上的经验，热情的设计师通过人人为本的设计将问题转换为设计解决方案。' },
    grjn: ['移动端设计', '数据大屏设计', '移动端交互设计'],
    yyjn: ['英语', '法语']
  })
  let navigate = useNavigate()
  let img = localStorage.getItem('img')|| use.img
  return (
    <div className='gr'>
      <div className='Xxhead'>
        <div onClick={() => {
          navigate('/app/my')
        }}><LeftOutline /></div>
        <div>个人资料</div>
        <div style={{ width: '20px', height: '100%' }}></div>
      </div>
      <div className='gr-user'>
        <div className='gr-xc'><EditSOutline onClick={() => {
          navigate('/app/my/xx')
        }} /></div>
        <div className='wais'>
          <img src={img} alt="" />
        </div>
        <div className='gr-waiv'>
          <p>{use.name}</p>
          <p>{use.zw}</p>
        </div>
        <div className='gr-gyw'>
          <p style={{ fontSize: '15px', marginBottom: '5px' }}>关于我</p>
          <p>{use.gyw}</p>
        </div>
      </div>
      <div className='gr-lxfs'>
        <div className='gr-lxfs-heade'>
          <div style={{fontSize:'15px'}}>联系方式</div>
          <div><EditSOutline onClick={() => {
            navigate('/app/my/xx')
          }} /></div>
        </div>
        <div className='gr-lxfs-body'>
          <div className='gr-lxfs-body-one'>
            <MailOutline fontSize={24} />
            <div>
              <p className='gr-1'>Email</p>
              <p>{use.yx}</p>
            </div>
          </div>
          <div className='gr-lxfs-body-one'>
            <PhonebookOutline fontSize={24} />
            <div>
              <p className='gr-1'>手机号</p>
              <p>{use.dh}</p>
            </div>
          </div>
          <div className='gr-lxfs-body-one'>
            <GlobalOutline fontSize={24} />
            <div>
              <p className='gr-1'>个人网站</p>
              <p>{use.wz}</p>
            </div>
          </div>
          <div className='gr-lxfs-body-one'>
            <CompassOutline fontSize={24} />
            <div>
              <p className='gr-1'>居住地</p>
              <p>{use.dz}</p>
            </div>
          </div>
        </div>
      </div>
      <div className='gr-gzjl'>
        <div className='gr-lxfs-heade'>
          <div style={{fontSize:'15px'}}>工作经历</div>
          <div><EditSOutline onClick={() => {
            navigate('/app/my/xx')
          }} /></div>
        </div>
        {use.gzjl.map((item, index) => {
          return (
            <div className='gr-gzjl-body' key={index}>
              <div className='gr-gzjl-img'>
                <img src={item.img} alt="" />
              </div>
              <div className='gr-gzjl-bodys'>
                <h3>{item.names}</h3>
                <p>{use.name}·<span>{item.zzw}</span></p>
                <p>{item.kstime}-{item.endtime}</p>
              </div>
            </div>
          )
        })}
      </div>
      <div className='gr-jyjl'>
        <div className='gr-lxfs-heade'>
          <div style={{fontSize:"15px"}}>教育经历</div>
          <div><EditSOutline onClick={() => {
            navigate('/app/my/xx')
          }} /></div>
        </div>
        <div className='gr-jyjl-body'>
          <div className='gr-jyjl-img'>
            <img src={use.jyjl.img} alt="" />
          </div>
          <div className='gr-jyji-bobys'>
            <h3>{use.jyjl.schoolname}</h3>
            <p>{use.jyjl.zymc}</p>
            <p>{use.jyjl.kstime} - {use.jyjl.endtime}</p>
          </div>
        </div>
      </div>
    </div>
  )
}
